<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		
		<!--1.画圆形
		    2.画正三角形
			思路：     html      div元素
			           css       倒角，必须有边框
			思路2：     html       div元素 #triangle		   
			            css        斜边
						           不设置宽高
								   左边框：50像素实线红色                 transparent
								   右边框：50像素实线黄色
								   下边框：50像素实线蓝色、透明度  .3
								   -->
<style>
	div#circle{
		width: 300px;
		height: 300px;
		border: 1px solid red;
		border-radius: 50%;
		/*边框阴影属性   box-shadow属性*/
		box-shadow: 5px 5px 50px 10px red inset;
	}
	/*2.正三角形 */
	div#triangle{
		width: 0;
		/*border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-bottom: 50px solid rgba(0,0,255,.3);*/
		/* 两行 */
		border: 50px solid transparent;
		border-top-color: rgba(0,0,255,.3);
	}
	input{
		outline: 1px solid red;
		outline: 0;/*去掉边框效果，通配选择器中*/
	}
</style>

					
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		文本框：<input type="text">
	</body>
</html>